<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/web页面/logo3.png" type="image/png">

    <title>我的订单</title>
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <style>
        body, h3, table, tr, td, button, img {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: 'Open Sans', sans-serif; /* 使用更现代的字体 */
        }
        tr {
            height: 170px; /* 或者其他固定高度，根据你的需求调整 */
            vertical-align: middle; /* 确保单元格内容垂直居中 */
        }
        th, td {
            padding: 15px;
            border: 1px solid #000000;
            text-align: center;
            box-sizing: border-box;
            height: 60px; /* 与tr的height匹配 */
            vertical-align: middle; /* 确保单元格内容垂直居中 */
        }


        body {
            background-color: #f6f6f6; /* 轻微的背景色 */
            padding:20px;
            overflow-y: scroll; /* 如果需要始终显示滚动条 */
            box-sizing: border-box;
        }

        h3 {
            text-align: center;
            margin-bottom: 20px;
            color: #333; /* 深色文字 */
        }

        table {

            width: 1200px; /* 或者其他固定宽度 */
            max-width: 100%; /* 确保表格在较小屏幕上也能自适应 */
            margin: 0 auto; /* 表格居中显示 */
            box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
            table-layout: fixed;
            background-color: #ffffff;
        }



        th {
            background-color: #ffffff;
            color: #333; /* 深色文字 */
            font-weight: 600; /* 加粗字体 */
        }

        tr:hover {
            background-color: #f3f3de;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            /* 保持高度不变 */
        }

        button {
            padding: 8px 15px;
            margin-right: 5px;
            border: none;
            border-radius: 5px;
            background-color: #dad2d2;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        button.receipt, button.return {
            background-color: rgba(201, 200, 200, 0.3); /* 收货按钮颜色 */
            color: #000000;
        }

        button.return {
            background-color: rgba(201, 200, 200, 0.3); /* 退货按钮颜色 */
        }

        button.receipt:hover, button.return:hover {
            background-color: rgb(169, 169, 169); /* 收货按钮悬停颜色 */
        }

        button.return:hover {
            background-color: rgb(169, 169, 169); /* 退货按钮悬停颜色 */
        }
        button:hover {
            background-color: #e2e2e2;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        button.active {
            background-color: #ff9800; /* 橙色背景 */
            color: #fff; /* 白色文字 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        img {
            width: 200px;
            height: 150px/* 你可以根据需要调整这个宽度 */
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 5px; /* 圆角图片 */
        }

        .status, .payment-method {
            text-transform: capitalize;
            width:200px;
            font-weight: 600; /* 加粗字体 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            table {
                width: 100%;
            }

            th, td {
                padding: 10px;
            }
            td.image-cell {
                width: auto; /* 在小屏幕上自动调整宽度 */
            }
            button {
                padding: 5px 10px;
            }
        }

    </style>
</head>
<body id="app">
<h3>我的订单列表</h3>
<div style="text-align: center; margin-bottom: 20px;">
    <button :class="{ active: filterStatus === 'unoperated' }" @click="filterOrders('unoperated')">待确认订单</button>
    <button :class="{ active: filterStatus === 'all' }" @click="filterOrders('all')">全部订单</button>
    <button :class="{ active: filterStatus === 'operated' }" @click="filterOrders('operated')">已执行订单</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="sortOrders('asc')">最远购买排序</button>
    <button @click="sortOrders('desc')">最近购买排序</button>
</div>


<table>
    <thead>
    <tr>
<!--        <th>编号</th>-->
        <th>名字</th>
        <th>图片</th>
        <th>下单时间</th>
        <th>数量</th>
        <th>总价</th>
        <th>当前状态</th>
        <th>支付方法</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <tr v-for="orders in ordersList" :key="orders.id">
<!--        <td>{{ orders.id }}</td>-->
        <td>{{ orders.goods.name }}</td>
        <td class="image-cell"><img :src="orders.goods.pic" alt="商品图片"></td>
        <td>{{ convertToChinaTime(orders.ordertime) }}</td>
        <td>{{ orders.num }}</td>
        <td>{{ orders.price }}</td>

        <td class="status">
            <span v-if="orders.paid === 0">未支付</span>
            <span v-if="orders.paid === 1">已经支付</span>
            <span v-if="orders.paid === 2">已签收</span>
            <span v-if="orders.paid === 3">已退货</span>
        </td>

        <td class="payment-method">
            <span v-if="orders.paymentMethod===1">现金</span>
            <span v-if="orders.paymentMethod===2">微信</span>
            <span v-if="orders.paymentMethod===3">支付宝</span>
            <span v-if="orders.paymentMethod===4">网银</span>
        </td>
        <td>
            <template v-if="orders.paid === 0 || orders.paid === 1">
                <button class="receipt" v-on:click="Receipt_confirmedd(orders.id)">收货</button>
                <button class="return" v-on:click="product(orders.id)">退货</button>
            </template>
            <template v-else-if="orders.paid === 2">
                交易结束
                <button class="delete" v-on:click="deleteOrder(orders.id)">删除记录</button>

            </template>
            <template v-else-if="orders.paid === 3">
                交易结束
                <button class="delete" v-on:click="deleteOrder(orders.id)">删除记录</button>


            </template>
        </td>
    </tr>
    </tbody>
</table>

<script>
    // 定义app
    const app = {
        // 数据绑定
        data() {
            return {
                // 我的订单列表
                ordersList: [],
                // 筛选状态
                filterStatus: 'all',
                // 原始订单列表，用于筛选
                originalOrdersList: [],
                // 默认激活的筛选按钮
                activeFilter: 'unoperated',
            }
        },
        // 事件绑定
        methods: {
            // 异步请求我的订单数据
            getOrdersByUsersId: function () {
                axios({
                    method: "post", url: "/getOrdersByUsersId", data: {}
                }).then((response) => {
                    this.ordersList = response.data;
                    this.originalOrdersList = [...response.data]; // 复制原始订单列表
                    this.filterOrders(this.filterStatus); // 应用筛选
                });
            },
            // 转换时间戳为中国时间
            convertToChinaTime: function (timestamp) {
                const date = new Date(timestamp);
                return date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
            },

            // 排序订单
            sortOrders: function (order) {
                if (order === 'asc') {
                    // 按时间先后排序
                    this.ordersList.sort((a, b) => new Date(a.ordertime) - new Date(b.ordertime));
                } else if (order === 'desc') {
                    // 按时间后先排序
                    this.ordersList.sort((a, b) => new Date(b.ordertime) - new Date(a.ordertime));
                }
            },
            // 筛选订单
            filterOrders: function (status) {
                this.filterStatus = status;
                this.activeFilter = status;
                switch (status) {
                    case 'all':
                        this.ordersList = [...this.originalOrdersList];
                        break;
                    case 'unoperated':
                        this.ordersList = this.originalOrdersList.filter(order => order.paid === 0 || order.paid === 1);
                        break;
                    case 'operated':
                        this.ordersList = this.originalOrdersList.filter(order => order.paid === 2 || order.paid === 3);
                        break;
                }
            },
            //收货申请
            Receipt_confirmedd:function (id){
                console.log('确认收货的订单ID是：',id);
                axios({
                    method: "post",
                    url:"/Receipt_confirmedd",
                    data:{
                        id: id }
                }).then((response)=>{
                    console.log("收货确认成功，服务器响应：", response.data);
                    alert(response.data)
                    if (response.data === '已签收') {

                        this.getOrdersByUsersId();
                    }

                }).catch((error) => {
                    console.error("收货确认失败，错误信息：", error);
                });
            },

            //退货申请
            product:function (id){
                console.log('确认收货的订单ID是：',id);
                axios({
                    method: "post",
                    url:"/product",
                    data:{
                        id: id }
                }).then((response)=>{
                    console.log("收货退货成功，服务器响应：", response.data);
                    alert(response.data)
                    if (response.data === '已退货') {

                        this.getOrdersByUsersId();
                    }
                }).catch((error) => {
                    console.error("退货确认失败，错误信息：", error);
                });
            },


            // 添加删除订单的方法
            deleteOrder: function (id) {
                console.log('删除订单的ID是：', id);
                if (confirm('您确定要删除这个订单吗？')) {
                    axios({
                        method: "post",
                        url: "/deleteOrder",
                        data: {
                            id: id
                        }
                    }).then((response) => {
                        console.log("删除订单成功，服务器响应：", response.data);
                        alert(response.data);
                        // 删除成功后，更新订单列表
                        this.getOrdersByUsersId();
                    }).catch((error) => {
                        console.error("删除订单失败，错误信息：", error);
                    });
                }
            },



        },
        // 构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getOrdersByUsersId();
            this.filterOrders('unoperated');
        }
    }

    // 启动app
    Vue.createApp(app).mount("#app")
</script>
</body>
</html>
